<template>
	<div class="view_page">
		<el-card class="box-card" v-loading="loading" element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<!--卡片头部-->
			<div slot="header" class="clearfix">
				<!--左侧-->
				<div class="left">
					<div class="back-page">
						<div class="add-back" @click="back">
							<i class="fa fa-arrow-left" aria-hidden="true"></i>

							<!-- <span v-if="addtype == 'add'">新增3D模型</span>
              <span v-if="addtype == 'update'">修改3D模型</span> -->
							<span>3d模型管理</span>
						</div>
					</div>
				</div>
				<div class="right">
					<el-button type="primary" @click="save()">保存</el-button>
					<!-- <el-button type="primary" @click="save()" v-if="addtype=='add'">保存</el-button> -->
					<!-- <el-button type="primary" @click="update()" v-if="addtype=='update'">保存</el-button> -->
				</div>
			</div>
			<!--卡片内容-->
			<div class="card-centont">
				<!--  <el-table :data="datalist" style="width: 100%" :show-header="false"> -->
				<!-- <el-table-column type="expand"> -->
				<!-- <template slot-scope="scope"> -->
				<div class="" style="display:flex;">
					<draggable :list="allfileList" :disabled="false" class="list-group" ghost-class="ghost"
						:move="checkMove" @end="onDragEnd" @start="dragging = true"
						style="display: flex;flex-wrap: wrap;">
						<div class="imgbox" v-for="(item, indexs) in allfileList" :key="indexs">
							<img :src="item.url" alt=""
								style="width:  100%;height:  100%; margin-right: 10px; margin-bottom: 5px; " />

							<div class="delIcon">
								<i class="el-icon-close " @click="deleImg(indexs)"></i>
							</div>
						</div>
						<el-upload :show-file-list="false" :action="uploadUrl" :on-preview="handlePreview"
							:on-remove="handleRemove" :file-list="allfileList" :data="uploadData"
							:before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess"
							:on-error="handleAvatarError" :auto-upload="true" multiple accept=".png,.jpg,.jpeg">
							<i class="el-icon-plus avatar-uploader-icon"
								style="font-size: 28px;color: #8c939d;width: 120px; height: 120px;line-height: 120px;text-align: center; border: 1px solid #ccc;"
								@click="getIndex()"></i>
						</el-upload>
					</draggable>
				</div>
				<!--  </template> -->
				<!-- </el-table-column> -->
				<!-- <el-table-column label="" prop="point_name"> </el-table-column> -->
				<!-- <el-table-column label="" prop="desc">
            <template slot-scope="scope">
              <div style="display: flex;align-items: center;flex-wrap: wrap; ">
                <el-button type="primary" @click="deldv(scope.$index)"
                  >删除点位</el-button
                >
                <el-button type="primary" @click="opendvv(scope.$index)"
                  >修改点位名称</el-button
                >
                <el-button
                  type="primary"
                  @click="save(scope.$index)"
                  v-if="addtype == 'add'"
                  >保存</el-button
                >
                <el-button
                  type="primary"
                  @click="update(scope.$index)"
                  v-if="addtype == 'update'"
                  >保存</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table> -->
			</div>
			<!-- <el-dialog
        :title="openData == 'add' ? '添加点位名称' : '修改点位名称'"
        :visible.sync="dialogVisible"
        width="50%"
        style="z-index: 9999;"
        :before-close="handleClose"
      >
        <el-form model="" ref="catalogue" label-width="100px">
          <el-form-item label="名称">
            <el-input v-model="dv_name" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="X">
            <el-input v-model="positionX" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="Y">
            <el-input v-model="positionY" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="Z">
            <el-input v-model="positionZ" placeholder=""></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" v-if="openData == 'add'" @click="toAdd"
            >保存并提交</el-button
          >
          <el-button
            type="primary"
            v-if="openData == 'update'"
            @click="toupdate"
            >修改并提交</el-button
          >
        </span>
      </el-dialog> -->
		</el-card>
	</div>
</template>

<script>
	import axios from "axios";
	import qs from "qs";
	import {
		Message
	} from "element-ui";
	import ckeditor from "@/components/common/ckeditor/ckeditor";
	import draggable from "vuedraggable"; //拖拽排序

	export default {
		name: "liveAdd",
		components: {
			ckeditor,
			draggable
		},
		data() {
			return {
				userInfo: JSON.parse(
					localStorage.getItem(this.$apis.getLocalKey().loginPersonnelInformation)
				),
				loading: false,
				//富文本文档类型

				liveData: {},

				uploadUrl: this.$apis.getUploadUrl() + "/file/upload", //上传地址
				uploadData: {
					type: 1 //没用
				},
				fileList: [],
				file_id: "",
				addtype: "",

				datalist: [],
				dv_name: "",
				positionX: "",
				positionY: "",
				positionZ: "",
				dialogVisible: false,
				dragging: false,
				lookzz: false,
				imgIndex: "",

				openData: "", //弹窗输入框的类型
				dv_id: "", //修改的Id

				allfileList: []
			};
		},
		created() {
			var _this = this;

			this.addtype = this.$route.query.type;

			_this.getListPage();

			console.log("3D模型this.$route.query:", this.$route.query);
			console.log(this.addtype);
			// if (this.addtype == "add") {
			// }
			// if (this.addtype == "update") {

			// }
		},

		beforeDestroy() {
			clearInterval(this.null);
		},
		methods: {
			checkMove: function(e) {
				window.console.log("Future index: " + e.draggedContext.futureIndex);
			},
			//方法中  onDragEnd方法在拖拽结束的时候回调打印出顺序,会跟随动作进行重新排序
			onDragEnd() {
				// console.log(this.form.childProject, "form.childProject");
				console.log(this.datalist, "this.dataList");
				// var data = this.datalist
				// for (var i = 0; i < data.length - 1; i++) {
				//   console.log(i)
				//   data[i].index = i
				// }
				// this.datalist = data
				// console.log(this.datalist, 'this.dataList=======')
			},
			handleClose() {
				this.dialogVisible = false;
				this.dv_name = "";
				this.positionX = "";
				this.positionY = "";
				this.positionZ = "";
			},
			deleImg(item, index) {
				this.allfileList.splice(item, 1);
				console.log(this.datalist);
			},
			//上传文件
			submitUpload() {
				this.$refs.upload.submit();
			},
			//文件列表移除文件时的钩子
			handleRemove(file, fileList) {
				console.log("handleRemove===========", file, fileList);
				this.file_id = "";
				this.fileList = fileList;
			},
			//点击文件列表中已上传的文件时的钩子
			handlePreview(file) {
				console.log(file);
			},
			//文件上传成功的钩子
			handleAvatarSuccess(res, file, fileList) {
				// console.log("文件上传成功的钩子:", res);
				// console.log("onSuccess:response", response);
				// console.log("onSuccess:file", file);
				// console.log("onSuccess:fileList", fileList);
				// Message.warning("正在上传，请稍等~");
				this.fileList = [];
				this.file_id = res.data.id;
				// console.log(fileList,'11111',this.allfileList)
				console.log(fileList)
				//等待所有文件都上传完成，这里注意fileList是所有的文件（包含已上传的）
				if (fileList.every(it => it.status == "success")) {
					this.fileList = [];
					fileList.map(item => {
						//只push新上传的 （带有response）
						item.response &&
							this.fileList.push({
								id: item.response.data.id,
								file_name: item.response.data.org_name,
								url: item.response.data.url,
								url_thumb: item.response.data.url_thumb
							});
						// console.log("item:", item);
					});
					// this.datalist[this.imgIndex].fileList = fileList;
					// setTimeout(() => {
					//   this.$emit("input", this.fileList);
					// });
					// Message.success("已全部上传完成~");
				}

				for (let i = 0; i < this.fileList.length; i++) {
					const element = this.fileList[i];
					this.allfileList.push(element);
				}
				// console.log("this.fileList:", this.fileList);
				// console.log("this.datalist:", this.datalist);
			},
			//文件上传失败时的钩子
			handleAvatarError(err, file) {
				Message.error("文件上传失败，请稍后再试");
			},
			//上传文件之前的钩子
			beforeAvatarUpload(file) {
				var typeList = ["image/jpeg", "image/png", "image/jpg"];
				// const isJPG = file.type === 'image/jpeg'
				const isJPG = typeList.includes(file.type);
				const isLt2M = file.size / 1024 / 1024 < 10;

				if (!isJPG) {
					this.$message.error("上传图片只能是 JPG或者PNG 格式!");
				}
				if (!isLt2M) {
					this.$message.error("上传文件大小不能超过 10MB!");
				}
				return isJPG && isLt2M;
			},
			//查询列表
			getListPage() {
				var _this = this;
				var datas = {
					equipment: _this.$route.query.type,

				};
				_this.$apis.equipment_panorama_list(datas).then(res => {
					if (res.result == 0) {
						// _this.datalist = res.data
						// var datalist = res.data;
						// for (let item of datalist) {
						//   item.fileList = [];
						// }
						_this.allfileList = res.data;

						// // 塞图片数组
						// for (let index = 0; index < _this.datalist.length; index++) {
						//   _this.datalist[index].fileList = [];
						//   var datas = {
						//     id: _this.datalist[index].id
						//   };
						//   _this.$apis.panorama_point_query(datas).then(res => {
						//     if (res.result == 0) {
						//       _this.datalist[index].fileList = res.data;
						//     }
						//   });
						// }
					}
				});
			},
			// 获取下标
			getIndex(index) {
				// console.log("获取下标getIndex:", index);
				// this.imgIndex = index;
			},
			// 添加点位弹窗
			opendv() {
				this.openData = "add";
				this.dv_name = "";
				this.positionX = "";
				this.positionY = "";
				this.positionZ = "";
				this.dialogVisible = true;
			},
			// 修改点位弹窗
			opendvv(index) {
				this.openData = "update";
				console.log(this.datalist[index]);
				this.dv_name = this.datalist[index].point_name;
				this.positionX = this.datalist[index].position[0];
				this.positionY = this.datalist[index].position[1];
				this.positionZ = this.datalist[index].position[2];
				this.dv_id = this.datalist[index].id;
				this.dialogVisible = true;
			},
			// 删除点位
			deldv(index) {
				var _this = this;
				var datas = {
					id: this.datalist[index].id
				};
				_this.$apis.panorama_point_query(datas).then(res => {
					if (res.result == 0) {
						if (res.data.length != 0) {
							Message.error("该点位下有3D模型，不可删除该点位！");
						} else {
							// 删除点位
							var datas = {
								id: this.datalist[index].id
							};
							_this
								.$confirm(
									"确定要删除【" + this.datalist[index].point_name + "】吗?",
									"提示", {
										confirmButtonText: "确定",
										cancelButtonText: "取消",
										type: "warning"
									}
								)
								.then(() => {
									_this.$apis.panorama_point_del(datas).then(res => {
										if (res.result == 0) {
											Message.success("删除成功");
											_this.getListPage();
										}
									});
								})
								.catch(() => {});
						}
					}
				});
			},
			// 点位添加
			toAdd() {
				var _this = this;
				var positionS =
					"[" +
					_this.positionX +
					"," +
					_this.positionY +
					"," +
					_this.positionZ +
					"]";
				var datas = {
					point_name: _this.dv_name,
					pro_id: _this.$route.query.pro_id,
					pro_type: _this.$route.query.pro_type,
					position: positionS
				};
				_this.$apis.panorama_point_add(datas).then(res => {
					if (res.result == 0) {
						Message.success("添加成功");
						_this.dialogVisible = false;
						_this.getListPage();
					}
				});
			},
			// 点位修改
			toupdate() {
				var _this = this;
				var positionS =
					"[" +
					_this.positionX +
					"," +
					_this.positionY +
					"," +
					_this.positionZ +
					"]";
				var datas = {
					id: _this.dv_id,
					point_name: _this.dv_name,
					pro_id: _this.$route.query.pro_id,
					pro_type: _this.$route.query.pro_type,
					position: positionS
				};
				_this.$apis.panorama_point_update(datas).then(res => {
					if (res.result == 0) {
						Message.success("修改成功");
						_this.dialogVisible = false;
						_this.getListPage();
					}
				});
			},
			// 保存
			save(index) {
				var _this = this;
				// console.log("this.datalist:", this.datalist);
				let idList = JSON.parse(JSON.stringify(this.allfileList))
				let idarr = []
				for (let item of idList) {
					idarr.push(item.id)
				}
				var datas = {
					equipment: _this.$route.query.type,
					panorama: JSON.stringify(idarr)
				};
				// console.log("新增保存:", datas);
				_this.$apis.equipment_panorama_update(datas).then(res => {
					if (res.result == 0) {
						Message.success("修改3D模型成功");
						_this.$router.back()
					}
				});
			},
			// 更新
			update(index) {
				var _this = this;
				// console.log("this.datalist:::", this.datalist);
				let idList = this.datalist[index].fileList.map(obj => {
					return obj.id;
				});
				var datas = {
					point: this.datalist[index].id,
					ids: JSON.stringify(idList)
				};
				// console.log("修改保存:", datas);
				_this.$apis.panorama_update(datas).then(res => {
					if (res.result == 0) {
						Message.success("修改3D模型成功");
						_this.getListPage();
					}
				});
			},

			back() {
				// this.$router.back(-2);
				this.$router.back();
			}
		}
	};
</script>

<style>
	.imgbox {
		position: relative;
		width: 120px;
		height: 120px;
		margin-right: 10px;
		margin-bottom: 5px;
		border-radius: 5px;
	}

	.delIcon {
		position: absolute;
		right: 0;
		top: 0;
		/* transform: translate(-50%, -50%); */
		/* z-index: 9999; */
		color: #ffffff;
		width: 20px;
		height: 20px;
		background: #909090;
		border-bottom-left-radius: 50%;
		text-align: center;
	}
</style>
